<template>
  <div class="order-page-wrapper">
    <!-- 功能导航栏 -->
    <div class="order-nav-container">
      <div class="order-nav" id="nav-box">
        <h2 class="nav-title">订单管理</h2>
        <p class="nav-guide">您可以查看历史订单、当前预定和待支付订单</p>
        <div class="nav-menu">
          <div 
            class="nav-item" 
            :class="{ active: activeNav === 'history' }"
            @click="handleNavSelect('history')"
          >
            历史订单
          </div>
          <div 
            class="nav-item" 
            :class="{ active: activeNav === 'booking' }"
            @click="handleNavSelect('booking')"
          >
            我的预定
          </div>
          <div 
            class="nav-item" 
            :class="{ active: activeNav === 'unpaid' }"
            @click="handleNavSelect('unpaid')"
          >
            待支付订单
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="order-content-container">
      <!-- 订单查询与筛选表单 -->
      <div class="order-search-bar">
        <div class="section-title-wrapper">
          <div class="section-title">{{ getNavTitle() }}</div>
          <el-switch
            v-if="activeNav === 'booking'"
            v-model="showCancellableOnly"
            active-text="仅显示可取消订单"
            @change="handleCancellableSwitch"
          />
        </div>
        <el-form :inline="true" :model="orderSearchForm">
          <el-form-item label="预订时间">
            <el-date-picker v-model="orderSearchForm.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" />
          </el-form-item>
          <el-form-item label="会议室名称">
            <el-input v-model="orderSearchForm.meetingRoomName" placeholder="请输入会议室名称" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="() => {
              switch (activeNav) {
                case 'history':
                  getHistoryOrders()
                  break
                case 'booking':
                  getMyBookings()
                  break
                case 'unpaid':
                  getUnpaidOrders()
                  break
              }
            }">查询</el-button>
            <el-button @click="resetSearch">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 订单列表表格 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column label="订单" align="center">
          <template #default="scope">
            <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
              <span>{{ scope.row.orderNo }}</span>
              <el-tag :type="getOrderStatusType(scope.row.status)" size="small">
                {{ getOrderStatusText(scope.row.status) }}
              </el-tag>
              <span v-if="activeNav === 'unpaid' && scope.row.remainingTime" class="countdown-text" :class="{ 'expired': scope.row.remainingTime === '已过期' }">
                {{ scope.row.remainingTime }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会议室"  align="center">
          <template #default="scope">
            <span>{{ scope.row.meetingRoomName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会议时间" align="center" v-if="activeNav === 'booking'">
          <template #default="scope">
            <span>{{ formatDateTime(scope.row.startTime) }}</span>
            <span> - </span>
            <span>{{ formatDateTime(scope.row.endTime).slice(-5,) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付截止时间" align="center" v-if="activeNav === 'unpaid'">
          <template #default="scope">
            <span>{{ formatDateTime(scope.row.payExpireTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="default" size="small" @click="handleViewDetail(scope.row)">详情</el-button>
            <template v-if="activeNav !== 'history'">
              <el-button v-if="scope.row.status === 0" type="primary" size="small" @click="handlePay(scope.row)">支付</el-button>
              <el-button v-if="scope.row.status === 0" type="info" size="small" @click="handleCancel(scope.row)">取消</el-button>
              <el-button v-if="(activeNav === 'booking' && showCancellableOnly)" type="info" size="small" @click="handleRefund(scope.row)">申请退款</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 订单详情对话框（简化版） -->
    <el-dialog title="订单详情" v-model="orderDetailVisible" width="40%">
      <div class="order-detail">
        <div class="detail-item"><span class="label">订单号：</span><span>{{ currentOrder.orderNo }}</span></div>
        <div class="detail-item"><span class="label">会议室：</span><span>{{ currentOrder.meetingRoomName }}</span></div>
        <div class="detail-item"><span class="label">开始时间：</span><span>{{ formatDateTime(currentOrder.startTime) }}</span></div>
        <div class="detail-item"><span class="label">结束时间：</span><span>{{ formatDateTime(currentOrder.endTime) }}</span></div>
        <div class="detail-item"><span class="label">总金额：</span><span>{{ currentOrder.totalAmount }} 元</span></div>
        <div class="detail-item"><span class="label">状态：</span><el-tag :type="getOrderStatusType(currentOrder.status)">{{ getOrderStatusText(currentOrder.status) }}</el-tag></div>
        <div class="detail-item" v-if="currentOrder.status === 5">
          <span class="label">预计当前退款金额：</span>
          <span class="amount-number">¥ {{ calculateRefundAmount(currentOrder) }}</span>
        </div>
      </div>
      <template #footer>
        <el-button @click="orderDetailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 支付对话框 -->
    <el-dialog title="订单支付" v-model="payDialogVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="pay-dialog-content">
        <div class="order-amount">
          <el-alert type="info" :closable="false">
            <template #default>
              <div class="amount-text">
                <span>订单总金额：</span>
                <span class="amount-number">¥ {{ orderAmount }}</span>
              </div>
            </template>
          </el-alert>
        </div>
        <div class="payment-method-select">
          <p class="section-title">请选择支付方式：</p>
          <el-radio-group v-model="paymentMethod">
            <el-radio :label="0">支付宝</el-radio>
            <el-radio :label="1">微信</el-radio>
            <el-radio :label="2">银联</el-radio>
          </el-radio-group>
        </div>
        <div v-if="showQRCode" class="qr-code-container" style="text-align: center; margin-top: 20px;">
          <img src="/qr-code.svg" alt="支付二维码" style="width: 200px; height: 200px;">
          <p style="margin-top: 10px; color: #666;">请使用{{ paymentMethod === 0 ? '支付宝' : paymentMethod === 1 ? '微信' : '银联' }}扫码支付</p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <template v-if="!showQRCode">
            <el-button @click="handlePayLater">稍后支付</el-button>
            <el-button type="primary" @click="handlePayNow">立即支付</el-button>
          </template>
          <template v-else>
            <el-button @click="cancelPayment">取消支付</el-button>
            <el-button type="primary" @click="confirmPayment" :loading="isPaymentProcessing">{{ isPaymentProcessing ? '处理中...' : '我已完成支付' }}</el-button>
          </template>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../../api/request'
import { Finished } from '@element-plus/icons-vue'
  // 导入BlurGradientBg组件
  import { BlurGradientBg } from "../../components/BlurGradientBg.module.js"

// 导航相关
const activeNav = ref('history')
const showCancellableOnly = ref(false)
const showQRCode = ref(false)

const getNavTitle = () => {
  switch (activeNav.value) {
    case 'history': return '历史订单'
    case 'booking': return '我的预定'
    case 'unpaid': return '待支付订单'
    default: return ''
  }
}

const handleNavSelect = (key) => {
  activeNav.value = key
  showCancellableOnly.value = false // 重置可取消订单开关
  currentPage.value = 1 // 切换导航时重置页码
  pageSize.value = 10 // 重置每页显示数量
  switch (key) {
    case 'history':
      getHistoryOrders()
      break
    case 'booking':
      getMyBookings()
      break
    case 'unpaid':
      getUnpaidOrders()
      break
  }
}

// 订单相关变量
const orderSearchForm = reactive({ status: '', timeRange: [], minAmount: null, maxAmount: null, meetingRoomName: '' })
const orderList = ref([])
const orderDetailVisible = ref(false)
const currentOrder = ref({})
const total = ref(0)
const allOrders = ref([])

// 分页相关变量
const historyPage = ref(1)
const historyPageSize = ref(10)
const bookingPage = ref(1)
const bookingPageSize = ref(10)
const cancellablePage = ref(1)
const cancellablePageSize = ref(10)
const pageSizes = [5, 10, 15, 20, 30, 50]

// 计算属性：根据当前导航获取对应的分页变量
const currentPage = computed({
  get: () => {
    switch (activeNav.value) {
      case 'history': return historyPage.value
      case 'booking': return bookingPage.value
      case 'cancellable': return cancellablePage.value
      default: return 1
    }
  },
  set: (val) => {
    switch (activeNav.value) {
      case 'history':
        historyPage.value = val
        break
      case 'booking':
        bookingPage.value = val
        break
      case 'cancellable':
        cancellablePage.value = val
        break
    }
  }
})

const pageSize = computed({
  get: () => {
    switch (activeNav.value) {
      case 'history': return historyPageSize.value
      case 'booking': return bookingPageSize.value
      case 'cancellable': return cancellablePageSize.value
      default: return 10
    }
  },
  set: (val) => {
    switch (activeNav.value) {
      case 'history':
        historyPageSize.value = val
        historyPage.value = 1
        break
      case 'booking':
        bookingPageSize.value = val
        bookingPage.value = 1
        break
      case 'cancellable':
        cancellablePageSize.value = val
        cancellablePage.value = 1
        break
    }
  }
})

const formatCountdown = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 获取历史订单列表
async function getHistoryOrders() {
  try {
    const response = await request({
      url: '/customer/orders',
      method: 'get',
      params: {
        pageNum: 1,
        pageSize: 1000
      }
    })
    if (response.success) {
      // 存储所有订单数据
      allOrders.value = response.data.records
      // 前端筛选数据
      let filteredOrders = allOrders.value.filter(order => {
        // 状态筛选 - 只显示已取消(2)、已完成(3)、已过期(4)和已退款(6)的订单
        if (orderSearchForm.status !== '') {
          if (orderSearchForm.status && order.status !== orderSearchForm.status) return false
        } else if (![1, 2, 3, 4, 6].includes(order.status)) {
          return false
        }
        // 时间范围筛选
        if (orderSearchForm.timeRange?.length === 2) {
          const orderStartTime = new Date(order.startTime).getTime()
          const orderEndTime = new Date(order.endTime).getTime()
          const filterStartTime = new Date(orderSearchForm.timeRange[0]).getTime()
          const filterEndTime = new Date(orderSearchForm.timeRange[1]).getTime()
          // 确保订单的时间范围在筛选时间范围内
          if (orderStartTime > filterEndTime || orderEndTime < filterStartTime) return false
        }
        // 会议室名称筛选
        if (orderSearchForm.meetingRoomName && !order.meetingRoomName.includes(orderSearchForm.meetingRoomName)) return false
        return true
      }).sort((a, b) => -(new Date(a.startTime) - new Date(b.startTime)))
      // 更新总数
      total.value = filteredOrders.length
      // 根据当前页码和每页数量对筛选后的数据进行分页
      const start = (currentPage.value - 1) * pageSize.value
      const end = Math.min(start + pageSize.value, filteredOrders.length)
      orderList.value = filteredOrders.slice(start, end)
    }
  } catch (error) {
    ElMessage.error('获取历史订单列表失败：' + error.message)
  }
}

// 获取待支付订单列表
async function getUnpaidOrders() {
  try {
    const response = await request({
      url: '/customer/orders',
      method: 'get',
      params: {
        pageNum: 1,
        pageSize: 1000
      }
    })
    if (response.success) {
      // 存储所有订单数据
      allOrders.value = response.data.records
      // 前端筛选待支付订单
      let filteredOrders = allOrders.value.filter(order => order.status === 0)
      // 添加倒计时信息
      filteredOrders = filteredOrders.map(order => ({
        ...order,
        remainingTime: calculateRemainingTime(order.payExpireTime)
      }))
      // 更新总数
      total.value = filteredOrders.length
      // 根据当前页码和每页数量对筛选后的数据进行分页
      const start = (currentPage.value - 1) * pageSize.value
      const end = Math.min(start + pageSize.value, filteredOrders.length)
      orderList.value = filteredOrders.slice(start, end)
    }
  } catch (error) {
    ElMessage.error('获取待支付订单列表失败：' + error.message)
  }
}

function calculateRemainingTime(payExpireTime) {
  const now = new Date();
  const expireTime = new Date(payExpireTime);
  const remainingMilliseconds = expireTime - now;

  if (remainingMilliseconds <= 0) {
    return '已过期';
  }

  const remainingSeconds = Math.floor(remainingMilliseconds / 1000);
  const minutes = Math.floor((remainingSeconds % 3600) / 60);
  const seconds = remainingSeconds % 60;

  return `${minutes}分钟${seconds}秒`;
}


// 获取我的预定（未使用的订单）
async function getMyBookings() {
  try {
    const url = showCancellableOnly.value ? '/customer/cancellable-orders' : '/customer/orders'
    const response = await request({
      url,
      method: 'get',
      params: {
        pageNum: 1,
        pageSize: 1000
      }
    })
    if (response.success) {
      if (showCancellableOnly.value) {
        orderList.value = response.data.sort((a, b) => new Date(a.startTime) - new Date(b.startTime))
        total.value = response.data.total
      } else {
        // 存储所有订单数据
        allOrders.value = response.data.records
        // 前端筛选未使用的订单
        let filteredOrders = allOrders.value.filter(order => {
          return (order.status == 1 || order.status == 5)&& new Date(order.startTime) > new Date()
        })
        // 按照开始时间升序排序
        filteredOrders.sort((a, b) => new Date(a.startTime) - new Date(b.startTime))
        // 更新总数
        total.value = filteredOrders.length
        // 根据当前页码和每页数量对筛选后的数据进行分页
        const start = (currentPage.value - 1) * pageSize.value
        const end = Math.min(start + pageSize.value, filteredOrders.length)
        orderList.value = filteredOrders.slice(start, end)
      }
    }
  } catch (error) {
    ElMessage.error('获取我的预定失败：' + error.message)
  }
}

// 处理可取消订单开关切换
function handleCancellableSwitch() {
  currentPage.value = 1
  getMyBookings()
}

function resetSearch() {
  orderSearchForm.status = ''
  orderSearchForm.bookingTimeRange = []
  orderSearchForm.minAmount = null
  orderSearchForm.maxAmount = null
  orderSearchForm.meetingRoomName = ''
  currentPage.value = 1 // 重置查询时重置页码
  pageSize.value = 10 // 重置每页显示数量
  switch (activeNav.value) {
    case 'history':
      getHistoryOrders()
      break
    case 'booking':
      getMyBookings()
      break
    case 'unpaid':
      getUnpaidOrders()
      break
  }
}

function getOrderStatusType(status) {
  switch (status) {
    case 0: return 'warning' // 待支付
    case 1: return 'success' // 已支付
    case 2: return 'info'    // 已取消
    case 3: return 'success' // 已完成
    case 4: return 'danger'  // 已过期
    case 5: return 'info'    // 退款中
    case 6: return 'default' // 已退款
    default: return ''
  }
}

function getOrderStatusText(status) {
  switch (status) {
    case 0: return '待支付'
    case 1: return '已支付'
    case 2: return '已取消'
    case 3: return '已完成'
    case 4: return '已过期'
    case 5: return '退款中'
    case 6: return '已退款'
    default: return ''
  }
}

// 支付订单
const orderAmount = ref(0);
const paymentCountdown = ref(0);
const currentOrderId = ref(null);

function handlePay(order) {
  paymentMethod.value = null;
  currentOrder.value = order;
  orderAmount.value = order.totalAmount;
  currentOrderId.value = order.id;
  paymentCountdown.value = formatCountdown(calculateRemainingTime(order.payExpireTime));
  payDialogVisible.value = true;
}

const isPaymentProcessing = ref(false)

function cancelPayment() {
  payDialogVisible.value = false
  showQRCode.value = false
  ElMessage.info('请留意支付截止时间')
}

async function confirmPayment() {
  isPaymentProcessing.value = true
  try {
    const response = await request({
      url: `/customer/pay-order`,
      method: 'post',
      data: {
        orderId: currentOrder.value.id || currentOrder.value.orderId,
        paymentMethod: paymentMethod.value
      }
    })
    if (response.success) {
      ElMessage.success('支付成功')
      payDialogVisible.value = false
      showQRCode.value = false
      isPaymentProcessing.value = false
      switch (activeNav.value) {
        case 'history':
          getHistoryOrders()
          break
        case 'booking':
          getMyBookings()
          break
        case 'unpaid':
          getUnpaidOrders()
          break
      }
    } else {
      isPaymentProcessing.value = false
      ElMessage.error('支付失败：' + (response.message || '未知错误'))
    }
  } catch (error) {
    isPaymentProcessing.value = false
    ElMessage.error('支付失败：' + (error.message || '未知错误'))
  }
}

// 计算预计退款金额
function calculateRefundAmount(order) {
  const startTime = new Date(order.startTime)
  const now = new Date()
  const hoursBeforeStart = (startTime - now) / (1000 * 60 * 60)
  const totalAmount = order.totalAmount

  if (hoursBeforeStart >= 72) {
    return totalAmount // 全额退款
  } else if (hoursBeforeStart >= 48) {
    return totalAmount * 0.75 // 退款75%
  } else if (hoursBeforeStart >= 24) {
    return totalAmount * 0.25 // 退款25%
  } else {
    return 0 // 不可退款
  }
}

// 申请退款
async function handleRefund(order) {
  try {
    const refundAmount = calculateRefundAmount(order)
    if (refundAmount <= 0) {
      ElMessage.warning('当前时间已不可申请退款')
      return
    }

    await ElMessageBox.confirm(
      `退款规则说明：\n\n1. 提前72小时退订可退全款\n\n2. 提前48小时退订可退75%\n\n3. 提前24小时退订可退25%\n\n预计退款金额：¥${refundAmount.toFixed(2)}\n\n确定要申请退款吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await request({
      url: `/customer/refund-order`,
      method: 'post',
      params: {
        orderId: order.id
      }
    })
    
    if (response.success) {
      ElMessage.success('申请退款成功')
      switch (activeNav.value) {
        case 'history':
          getHistoryOrders()
          break
        case 'booking':
          getMyBookings()
          break
        case 'unpaid':
          getUnpaidOrders()
          break
      }
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('申请退款失败：' + error.message)
    }
  }
}

function handleViewDetail(order) {
  currentOrder.value = order
  orderDetailVisible.value = true
}

// 支付相关变量和方法
const payDialogVisible = ref(false)
const paymentMethod = ref(null)

// 立即支付
async function handlePayNow() {
  if (paymentMethod.value==null) {
    ElMessage.warning('请选择支付方式')
    return
  }
  showQRCode.value = true
}

// 格式化日期时间
function formatDateTime(dateTimeStr) {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 稍后支付
function handlePayLater() {
  payDialogVisible.value = false
  ElMessage.info('留意支付截止时间')
}

// 分页相关方法
function handleSizeChange(val) {
  pageSize.value = val
  currentPage.value = 1 // 切换每页显示数量时重置为第一页
  switch (activeNav.value) {
    case 'history':
      getHistoryOrders()
      break
    case 'booking':
      getMyBookings()
      break
    case 'unpaid':
      getUnpaidOrders()
      break
  }
}

function handleCurrentChange(val) {
  currentPage.value = val
  switch (activeNav.value) {
    case 'history':
      getHistoryOrders()
      break
    case 'booking':
      getMyBookings()
      break
    case 'unpaid':
      getUnpaidOrders()
      break
  }
}

onMounted(() => {
  // 在组件挂载时，调用 handleNavSelect 来加载默认选中的导航项（历史订单）的数据
  handleNavSelect(activeNav.value);

  const timer = setInterval(() => {
    if (activeNav.value === 'unpaid') {
      orderList.value = orderList.value.map(order => ({
        ...order,
        remainingTime: calculateRemainingTime(order.payExpireTime)
      }));
    }
  }, 1000);

  onUnmounted(() => {
    clearInterval(timer);
  });
  

  
  // 添加渐变背景效果
  let navBg = new BlurGradientBg({ 
    dom: "nav-box", 
    colors: ["#cce5ff","#c2c9f0","#8d8fad","#3d6492"], 
    loop: true 
  })
})
</script>

<style scoped>
.order-page-wrapper { padding: 0px; 
  display: flex;
    flex-direction: column;
    align-items: center;}

.order-nav { margin-bottom: 20px; }

.section-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.order-search-bar { 
  margin-bottom: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.amount-range-wrapper { display: flex; align-items: center; }
.amount-input { width: 150px; }
.amount-separator { margin: 0 8px; color: #888; }

.order-detail { margin-bottom: 16px; }
.detail-item { margin-bottom: 8px; }
.label { color: #666; margin-right: 8px; }

.pay-dialog-content {
  padding: 20px;
}

.payment-method-select {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 10px 20px;
}

.countdown-text {
  font-size: 12px;
  color: #409EFF;
  &.expired {
    color: #F56C6C;
  }
}

.order-nav-container {
  width: 88%;
  max-width: 1700px;
  margin: 0 auto;
}

.order-nav {
  margin-bottom: -220px;
  padding: 40px 24px 230px 24px;
  border-radius: 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.nav-title {
  margin-top: 0;
  margin-bottom: 8px;
  color: #f2f2f2;
  position: relative;
  z-index: 10;
  font-family: "汉仪雅酷黑-85", sans-serif;
  font-size: 36px;
  text-align: center;
}

.nav-guide {
  margin-top: 0;
  margin-bottom: 16px;
  color: #ebebeb;
  font-size: 14px;
  position: relative;
  z-index: 10;
  text-align: center;
}

.nav-menu {
  display: flex;
  justify-content: center;
  gap: 30px;
  position: relative;
  z-index: 10;
  margin-top: 20px;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #f2f2f2;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* 新增样式 */
.order-content-container {
  width: 80%; /* 或者您希望的宽度 */
  max-width: 1700px; /* 与导航栏一致或根据需要调整 */
  margin: 20px 50px; /* 上下边距20px，左右自动实现居中 */
  padding: 24px; /* 内边距 */
  background-color: #ffffff; /* 白色背景 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
  z-index: 999;
    position: relative;
}

.order-search-bar {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9; /* 轻微的背景色以区分 */
}
</style>